<script setup lang="ts">
import {FormInstance, FormRules} from "element-plus";
import { ref } from "vue";
import { LoginForm } from "~/model/login";
import { useUserStore } from '~/store/modules/user.ts';
import { digestByMD5 } from '~/utils';
import { parseAjaxResponse } from '~/common/request.ts';
import { useRouter } from 'vue-router';
import { defaultHomePagePath } from '~/router/menu';

const loginForm = ref<LoginForm>({
  username: '',
  password: ''
});

const loginRef = ref<FormInstance>();

const loginRules = ref<FormRules<LoginForm>>({
  username: [
    { required: true, message: "请输入账号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" }
  ]
});

const isLoading = ref(false);
const router = useRouter();

const doLogin = () => {
  loginRef.value?.validate((isValid) => {
    if (isValid) {
      const user = useUserStore();
      isLoading.value = true;
      let password = digestByMD5(loginForm.value.password);
      user.login(loginForm.value.username, password).then(data => {
        isLoading.value = false;
        parseAjaxResponse({
          data,
          onSuccess() {
              router.push({
                path: defaultHomePagePath
              })
          },
          showErrorMessage: false
        })
      }).catch(() => {
        isLoading.value = false;
      })
    }
  })
}
</script>

<template>
  <el-container class="login-container">
    <el-container class="left-box">
      <div class="logo-box">
        <el-text
          class="title"
        >
          sinan
        </el-text>
        <el-text>
          元数据采集、探索、管理，挖掘数据的价值
        </el-text>
      </div>
      <el-form
        class="login-form"
        :model="loginForm"
        :rules="loginRules"
        label-position="top"
        ref="loginRef"
      >
        <el-form-item
          label="账号"
          prop="username"
        >
          <el-input
            type="text"
            v-model.trim="loginForm.username"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model.trim="loginForm.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            :loading="isLoading"
            @click="doLogin"
          >登<span style="display: inline-block; width: 20px"></span>录</el-button>
        </el-form-item>
      </el-form>
    </el-container>
    <el-container class="right-box">
    </el-container>
  </el-container>
</template>

<style scoped>
.login-container {
  .left-box {
    height: 100vh;
    flex: 0 0 25%;
    min-width: 422px;

    display: flex;
    flex-direction: column;
    align-items: center;

    .login-form {
      width: 350px;
    }

    .logo-box {
      height: 35%;
      min-height: 200px;

      padding-bottom: 30px;

      display: flex;
      flex-direction: column;
      justify-content: end;

      .title {
        font-size: 80px;
      }
    }
  }
  .right-box {
    background: linear-gradient(120deg, rgba(224, 195, 252, 0.63) 0%, rgba(142, 197, 252, 0.44) 100%);
  }
}
</style>
